<template>
  <div>
    <el-button
      icon="el-icon-plus"
      type="primary"
      size="mini"
      class="u-m-b-10"
      @click="addEquipment"
      >新增</el-button
    >
    <y-table
      ref="tableInner"
      :data="niandugongzuomubiao"
      :defaultColumnConfig="defaultColumnConfig"
      :columns="tableColumn"
      :highlight-current-row="true"
      :max-height="500"
    />
  </div>
</template>

<script>
// import ValidateMixin from "@/mixins/ValidateMixin.js";
/**
 * 表单校验
 */
// let REQUIRED_PORP_LIST1 = [
//   {
//     label: "联系人姓名",
//     prop: "mubiaofenlei",
//   },
//   {
//     label: "部门",
//     prop: "mubiaoshedingzhi",
//   },
//   {
//     label: "座机电话",
//     prop: "zuojidianhua",
//   },
//   {
//     label: "手机",
//     prop: "shouji",
//   },
//   {
//     label: "传真",
//     prop: "chuangzheng",
//   },
// ];
/**
 * 目标行内容
 */
let objectiveAndContents = () => {
  return {
    zID: "",
    mubiaofenlei: "",
    mubiaoshedingzhi: "",
    zuojidianhua: "",
    shouji: "",
    chuangzheng: "",
    beizhu: "",
  };
};

export default {
  // mixins: [ValidateMixin],
  data() {
    return {
      //模式
      isFormDataDisabled: false,
      niandugongzuomubiao: [],
      // 全局
      defaultColumnConfig: {
        align: "center",
        resizable: false,
      },
      // 表头1
      tableColumn: [
        {
          type: "index",
          fixed: "left",
          label: "序号",
          width: 55,
        },
        {
          label: "联系人姓名",
          render: (h, scope) => {
            let value = scope.row.mubiaofenlei;
            let Disable = this.isFormDataDisabled;
            let input = (
              <el-input
                size="mini"
                value={value}
                onInput={(e) => {
                  scope.row.mubiaofenlei = e;
                }}
                disabled={Disable}
                style="width: 100%;"
              ></el-input>
            );
            return <div>{input}</div>;
          },
        },

        {
          label: "部门",
          render: (h, scope) => {
            let value = scope.row.mubiaoshedingzhi;
            let Disable = this.isFormDataDisabled;
            let input = (
              <el-input
                size="mini"
                value={value}
                onInput={(e) => {
                  scope.row.mubiaoshedingzhi = e;
                }}
                disabled={Disable}
                style="width: 100%;"
              ></el-input>
            );
            return <div>{input}</div>;
          },
        },
        {
          label: "座机电话",
          render: (h, scope) => {
            let value = scope.row.zuojidianhua;
            let Disable = this.isFormDataDisabled;
            let input = (
              <el-input
                size="mini"
                value={value}
                onInput={(e) => {
                  scope.row.zuojidianhua = e;
                }}
                disabled={Disable}
                style="width: 100%;"
              ></el-input>
            );
            return <div>{input}</div>;
          },
        },
        {
          label: "手机",
          render: (h, scope) => {
            let value = scope.row.shouji;
            let Disable = this.isFormDataDisabled;
            let input = (
              <el-input
                size="mini"
                value={value}
                onInput={(e) => {
                  scope.row.shouji = e;
                }}
                disabled={Disable}
                style="width: 100%;"
              ></el-input>
            );
            return <div>{input}</div>;
          },
        },
        {
          label: "传真",
          render: (h, scope) => {
            let value = scope.row.chuangzheng;
            let Disable = this.isFormDataDisabled;
            let input = (
              <el-input
                size="mini"
                value={value}
                onInput={(e) => {
                  scope.row.chuangzheng = e;
                }}
                disabled={Disable}
                style="width: 100%;"
              ></el-input>
            );
            return <div>{input}</div>;
          },
        },
        {
          label: "备注",
          render: (h, scope) => {
            let value = scope.row.beizhu;
            let Disable = this.isFormDataDisabled;
            let input = (
              <el-input
                size="mini"
                value={value}
                onInput={(e) => {
                  scope.row.beizhu = e;
                }}
                disabled={Disable}
                style="width: 100%;"
              ></el-input>
            );
            return <div>{input}</div>;
          },
        },
        {
          label: "操作",
          fixed: "right",
          align: "center",
          width: "100",
          render: (h, scope) => {
            let Disable = this.isFormDataDisabled;
            let deleteBtn = (
              <el-button
                type="text"
                size="mini"
                disabled={Disable}
                class={Disable ? this.$style.deleteColos : this.$style.col}
                onClick={(e) => {
                  let index = scope.$index;
                  let rowId = scope.row.zID;
                  this.closeOpen(index, rowId);
                }}
              >
                删除
              </el-button>
            );
            return <div>{deleteBtn}</div>;
          },
        },
      ],
    };
  },
  methods: {
    //校验必填
    // verify_required() {
    // return  this.$$validateForm(this.niandugongzuomubiao, REQUIRED_PORP_LIST1);
    // },
    // 新增行内容
    addEquipment() {
      let data = objectiveAndContents();
      this.niandugongzuomubiao.push(data);
    },

    /**
     *  删除
     * @param {*} index 索引
     * @param {*} rowId 行ID
     */
    closeOpen(index, rowId) {
      this.$confirm("此操作将永久删除该目标, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
      })
        .then((res) => {
          console.log("删除的===》", rowId);
          this.niandugongzuomubiao.splice(index, 1);
          if (!rowId) return;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss">
.icon-plus {
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background: rgb(78 145 222);
  border-radius: 5px;
  padding: 3px;
}
</style>
<style lang="scss" module>
.col {
  color: red !important;
  cursor: pointer;
}

.deleteColos {
  color: #c0c4cc;
}
</style>
